<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>space</title>
</head>
<body>

    <!-- 所有用户可见 -->

    <!-- 音乐人可见 -->
<!--    <template v-if="user.userType === 2">-->
<!--        <a href="song.html">音乐</a>-->
<!--        <a href="column.html">专辑</a>-->
<!--        <a href="playList.html">歌单</a>-->
<!--    </template>-->
<!--    <a v-if="user.userType === 2" href="song.html">音乐</a>-->

<!--    <div v-if="isMusicUser" class="nav-container">-->
<!--        <a href="song.html">音乐</a>-->
<!--        <a href="column.html">专辑</a>-->
<!--        <a href="playList.html">歌单</a>-->
<!--    </div>-->
    <!-- 审核员可见 -->
<!--    <a v-if="isManager" href="review.html">审核</a>-->

    <!-- 所有登录用户可见 -->

</div>



<!--<img src="imgs/smile.png" width="30" height="30">-->
<!--<audio src="audio/388f796a-4ec0-4276-9c3a-9bba9bc8feeb.mp3" controls ></audio>-->
<!--<audio src="audio/73bf75e5-ef84-4de1-b39e-f6ac3f0efc82.m4a" controls ></audio>-->


<div id="app">
    <a href="profile.html">个人中心</a>
    <a href="news.html">消息</a>
    <a href="playList.html">歌单</a>
    <a href="login.html">退出登录</a>

    <template v-if="isMusicUser">
        <a href="song.html">音乐</a>
        <a href="column.html">专辑</a>
    </template>

    <a v-if="isManager" href="review.html">审核</a>

    <h1 id="welcomeMsg">正在加载用户信息...</h1>
    <div class="recommend-section">
        <el-card class="box-card" style="margin-bottom: 20px;">
            <div slot="header" class="clearfix">
                <span style="font-size: 18px;">🎵 随机推荐歌曲</span>
                <el-button
                        style="float: right; padding: 3px 10px"
                        type="primary"
                        @click="loadRandomSong"
                        :loading="randomSongLoading">
                    换一批
                </el-button>
            </div>

            <el-table :data="randomSong ? [randomSong] : []" v-if="randomSong">
                <el-table-column label="歌曲信息">
                    <template slot-scope="scope">
                        <div class="song-info">
                            <div class="name">{{ scope.row.name }}</div>
                            <div class="author">作者：{{ scope.row.userName }}</div>
                            <audio controls :src="scope.row.songPath"></audio>
                            <div style="margin-top: 10px;">
                                <el-button
                                        type="success"
                                        size="mini"
                                        @click="handleLike(scope.row)">点赞/取消
<!--                                    点赞/取消 ({{ scope.row.likes }})-->
                                </el-button>
                                <el-button
                                        type="primary"
                                        size="mini"
                                        @click="handleDownload(scope.row)">
                                    下载
                                </el-button>
                            </div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div v-else class="empty-tip">暂无推荐歌曲</div>
        </el-card>

        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="font-size: 18px;">🎧 随机推荐歌单</span>
                <el-button
                        style="float: right; padding: 3px 10px"
                        type="success"
                        @click="loadRandomPlaylist"
                        :loading="randomPlaylistLoading">
                    换一批
                </el-button>
            </div>
            <el-table :data="randomPlaylist ? [randomPlaylist] : []" v-if="randomPlaylist">
                <el-table-column label="歌单信息">
                    <template slot-scope="scope">
                        <div class="playlist-info">
                            <div class="name">{{ scope.row.name }}</div>
                            <div class="creator">创建者：{{ scope.row.userName }}</div>
                            <el-button
                                    type="primary"
                                    size="mini"
                                    @click="handleViewPlayList(scope.row)">
                                查看详情
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div v-else class="empty-tip">暂无推荐歌单</div>
        </el-card>
    </div>


    <!-- 搜索框 -->
    <template>
        <el-row style="margin: 20px 0">
            <el-input
                    v-model="searchKeywordUser"
                    placeholder="输入用户名搜索"
                    style="width: 300px"
                    @keyup.enter.native="handleSearchUser">
                <el-button
                        slot="append"
                        icon="el-icon-search"
                        @click="handleSearchUser"></el-button>
            </el-input>
        </el-row>
    </template>
    <!-- 用户列表 -->
    <template>
        <el-table :data="tableDataUser" style="width: 100%">
            <el-table-column type="index" label="序号" width="80"></el-table-column>
            <el-table-column label="头像" width="120">
                <template slot-scope="scope">
                    <img :src="scope.row.avatarPath || 'default-avatar.png'"
                            style="width: 50px; height: 50px; border-radius: 50%">
                </template>
            </el-table-column>
            <el-table-column prop="userName" label="用户名"></el-table-column>
            <el-table-column label="用户类型">
                <template slot-scope="scope">
                    <el-tag :type="getUserTypeStyle(scope.row.userType)">
                        {{ getUserTypeText(scope.row.userType) }}
                    </el-tag>
                </template>
            </el-table-column>
<!--            <el-table-column label="操作" width="120">-->
<!--                <template slot-scope="scope">-->
<!--                    <el-button-->
<!--                            type="success"-->
<!--                            size="mini"-->
<!--                            @click="handleLike(scope.row)">-->
<!--                        {{ scope.row.liked ? '取消' : '关注' }}-->
<!--                    </el-button>-->
<!--                </template>-->
<!--            </el-table-column>-->
            <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                    <el-button
                            :type="scope.row.liked ? 'success' : 'info'"
                            size="mini"
                            @click="handleFollow(scope.row)">
                        关注/取关
<!--                        {{ scope.row.liked ? '关注' : '已关注' }}-->
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <!-- 用户分页 -->
    <div class="block" style="margin-top: 20px">
        <el-pagination
                @size-change="handleSizeChangeUser"
                @current-change="handleCurrentChangeUser"
                :current-page="currentPageUser"
                :page-sizes="[2, 10, 20]"
                :page-size="pageSizeUser"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCountUser">
        </el-pagination>
    </div>

    <!-- 歌曲搜索部分 -->
    <template>
        <!-- 搜索框和排序 -->
        <el-row style="margin: 20px 0">
            <el-input
                    v-model="searchKeywordSong"
                    placeholder="输入歌名搜索"
                    style="width: 300px; margin-right: 10px"
                    @keyup.enter.native="handleSearchSong">
                <el-button
                        slot="append"
                        icon="el-icon-search"
                        @click="handleSearchSong"></el-button>
            </el-input>
            <el-select
                    v-model="sortType"
                    placeholder="排序方式"
                    @change="handleSearchSong"
                    style="width: 120px">
                <el-option label="按点赞" :value="0"></el-option>
                <el-option label="按时间" :value="1"></el-option>
            </el-select>
        </el-row>

        <!-- 歌曲列表 -->
        <el-table :data="tableDataSong" style="width: 100%">
            <el-table-column type="index" label="序号" width="80"></el-table-column>
            <el-table-column prop="userName" label="作者" width="120"></el-table-column>
            <el-table-column prop="name" label="歌名" width="120"></el-table-column>
            <el-table-column label="播放" width="300">
                <template slot-scope="scope">
                    <audio controls :src="scope.row.songPath" @play="handlePlayCount(scope.row)"></audio>
                </template>
            </el-table-column>
            <el-table-column prop="likes" label="点赞数" width="100"></el-table-column>
            <el-table-column prop="playCount" label="播放量" width="100"></el-table-column>
            <el-table-column prop="createdAt" label="创建时间" width="100"></el-table-column>
            <el-table-column label="操作" width="120">
                <template slot-scope="scope">
<!--                    <el-button-->
<!--                            type="success"-->
<!--                            size="mini"-->
<!--                            @click="handleLike(scope.row)">-->
<!--                        {{ scope.row.liked ? '取消' : '点赞' }}-->
<!--                    </el-button>-->
                    <el-button type="success" @click="handleLike(scope.row)">点赞/取消</el-button>
                    <el-button
                            type="primary"
                            size="mini"
                            @click="handleDownload(scope.row)">
                        下载
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 下载对话框 -->
        <el-dialog
                title="歌曲下载"
                :visible.sync="downloadDialogVisible"
                width="40%">
            <div class="download-content">
                <h3>下载地址：</h3>
                <el-input
                        v-model="selectedSongPath"
                        readonly
                        class="download-input">
                    <template slot="append">
                        <el-button
                                type="primary"
                                @click="copyDownloadLink">
                            复制链接
                        </el-button>
                    </template>
                </el-input>
                <p class="vip-tip">🔒 VIP专享下载（有效期至 {{ formatVipDate }}）</p>
            </div>
        </el-dialog>
<!--        <el-table-column label="播放" width="400" class-name="audio-cell">
                <template slot-scope="scope">
                    <audio controls :src="scope.row.songPath" @play="handlePlayCount(scope.row)" ></audio>
                </template>
            </el-table-column>
            <el-table-column prop="likes" label="点赞数" width="100"></el-table-column>
            <el-table-column prop="playCount" label="播放量" width="100"></el-table-column>
            <el-table-column
                   label="操作">
                <template slot-scope="scope">
                    <el-button type="success" @click="handleLike(scope.row)">点赞/取消</el-button>
                    <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>-->

        <!-- 分页 -->
        <div class="block" style="margin-top: 20px">
            <el-pagination
                    @size-change="handleSizeChangeSong"
                    @current-change="handleCurrentChangeSong"
                    :current-page="currentPageSong"
                    :page-sizes="[5, 10, 20]"
                    :page-size="pageSizeSong"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCountSong">
            </el-pagination>
        </div>
    </template>

    <!-- 专辑搜索部分 -->
    <template>
        <!-- 搜索框和排序 -->
        <el-row style="margin: 20px 0">
            <el-input
                    v-model="searchKeywordColumn"
                    placeholder="输入专辑名称搜索"
                    style="width: 300px; margin-right: 10px"
                    @keyup.enter.native="handleSearchColumn">
                <el-button
                        slot="append"
                        icon="el-icon-search"
                        @click="handleSearchColumn"></el-button>
            </el-input>
        </el-row>

        <!-- 专辑列表 -->
        <el-table :data="tableDataColumn" style="width: 100%">
            <el-table-column type="index" label="序号" width="80"></el-table-column>
            <el-table-column prop="name" label="专辑名称" width="180"></el-table-column>
            <el-table-column prop="userName" label="创建者" width="120"></el-table-column>
            <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                    <el-button
                            type="primary"
                            size="mini"
                            @click="handleViewColumn(scope.row)">
                        查看详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="block" style="margin-top: 20px">
            <el-pagination
                    @size-change="handleSizeChangeColumn"
                    @current-change="handleCurrentChangeColumn"
                    :current-page="currentPageColumn"
                    :page-sizes="[5, 10, 20]"
                    :page-size="pageSizeColumn"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCountColumn">
            </el-pagination>
        </div>
    </template>
<!--专辑中歌曲对话框-->
    <el-dialog title="专辑歌曲列表" :visible.sync="dialogVisibleColumnSongs" width="80%">
        <el-table :data="columnSongsData" style="width: 100%">
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="userName" label="作者" width="100"></el-table-column>
            <el-table-column prop="name" label="歌名" width="120"></el-table-column>
            <el-table-column label="播放" width="300">
                <template slot-scope="scope">
                    <audio controls :src="scope.row.songPath" @play="handlePlayCount(scope.row)"></audio>
                </template>
            </el-table-column>
            <el-table-column prop="likes" label="点赞数" width="80"></el-table-column>
            <el-table-column prop="playCount" label="播放量" width="100"></el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="block" style="margin-top: 20px">
            <el-pagination
                    @size-change="handleColumnSongsSizeChange"
                    @current-change="handleColumnSongsCurrentChange"
                    :current-page="currentColumnSongsPage"
                    :page-sizes="[5, 10, 20]"
                    :page-size="pageColumnSongsSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalColumnSongsCount">
            </el-pagination>
        </div>
    </el-dialog>

    <!-- 歌单搜索部分 -->
    <template>
        <!-- 搜索框和排序 -->
        <el-row style="margin: 20px 0">
            <el-input
                    v-model="searchKeywordPlayList"
                    placeholder="输入歌单名称搜索"
                    style="width: 300px; margin-right: 10px"
                    @keyup.enter.native="handleSearchPlayList">
                <el-button
                        slot="append"
                        icon="el-icon-search"
                        @click="handleSearchPlayList"></el-button>
            </el-input>
        </el-row>
        <!-- 专辑列表 -->
        <el-table :data="tableDataPlayList" style="width: 100%">
            <el-table-column type="index" label="序号" width="80"></el-table-column>
            <el-table-column prop="name" label="歌单名称" width="180"></el-table-column>
            <el-table-column prop="userName" label="创建者" width="120"></el-table-column>
            <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                    <el-button
                            type="primary"
                            size="mini"
                            @click="handleViewPlayList(scope.row)">
                        查看详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="block" style="margin-top: 20px">
            <el-pagination
                    @size-change="handleSizeChangePlayList"
                    @current-change="handleCurrentChangePlayList"
                    :current-page="currentPagePlayList"
                    :page-sizes="[5, 10, 20]"
                    :page-size="pageSizePlayList"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCountPlayList">
            </el-pagination>
        </div>
    </template>

    <!-- 歌单中歌曲展示 -->
    <el-dialog title="歌单歌曲列表" :visible.sync="dialogPlaylistSongs" width="70%">
        <el-table :data="playlistSongData" style="width: 100%">
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column prop="userName" label="作者"></el-table-column>
            <el-table-column prop="name" label="歌名"></el-table-column>
            <el-table-column label="播放" width="300">
                <template slot-scope="scope">
                    <audio controls :src="scope.row.songPath"></audio>
                </template>
            </el-table-column>
            <el-table-column prop="likes" label="点赞数" width="100"></el-table-column>
        </el-table>

        <div class="block" style="margin-top: 20px">
            <el-pagination
                    @size-change="handlePlaylistSongSizeChange"
                    @current-change="handlePlaylistSongPageChange"
                    :current-page="playlistSongPage"
                    :page-sizes="[5, 10, 20]"
                    :page-size="playlistSongSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="playlistSongTotal">
            </el-pagination>
        </div>
    </el-dialog>
</div>



</body>
</html>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>

    new Vue({
        el:"#app",
        mounted(){
            // this.hello();
            // this.loadRandomSong();
            // this.loadRandomPlaylist();

            this.$nextTick(() => {
                this.hello();
                this.loadRandomSong();
                this.loadRandomPlaylist();
                // 确保在 DOM 更新后执行
            });
        },
        methods:{
            hello() {
                axios.get('/MVCDemo/user/getUser').then(resp => { // 改用箭头函数
                    // 正确写法：确保操作 Vue 实例
                    this.user = Object.assign({}, this.user, resp.data);
                    document.getElementById("welcomeMsg").textContent = `欢迎你，${this.user.userName}！`;
                }).catch(error => {
                    console.error("请求失败:", error);
                });
            },
            async loadUsers() {
                try {
                    // 获取用户列表
                    const resp = await axios.get('/MVCDemo/space/searchUser', {
                        params: {
                            keyword: this.searchKeywordUser,
                            currentPage: this.currentPageUser,
                            pageSize: this.pageSizeUser
                        }
                    });

                    // 提取用户ID列表
                    const userIds = resp.data.rows.map(u => u.id);

                    // 批量获取关注状态
                    const batchResp = await axios.post('/MVCDemo/follow/batchCheck',
                        `data=${JSON.stringify({ userIds })}`, // 注意参数格式
                        {
                            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                        }
                    );

                    // 合并关注状态
                    this.tableDataUser = resp.data.rows.map(user => ({
                        ...user,
                        liked: batchResp.data[user.id] || false
                    }));

                    this.totalCountUser = resp.data.totalCount;
                } catch (error) {
                    console.error('加载失败:', error);
                }
            },

            // async handleFollow(user) {
            //     try {
            //         const response = await axios.post('/MVCDemo/follow/turnFollow',
            //             `followedId=${user.id}`,
            //             { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
            //         );
            //
            //         // 确认后端响应字段结构
            //         const success = response.data.code === 200; // 根据实际响应调整
            //
            //         if (success) {
            //             //正确切换状态：当前状态取反
            //            const newStatus = !user.liked;
            //             this.$set(user, 'liked', newStatus);
            //
            //             // 根据新状态显示消息
            //             this.$message(resp.data.message
            //                 // type: 'success',
            //                 // message: newStatus ? '取消关注成功' : '关注成功',
            //                 // duration: 1500
            //             );
            //         } else {
            //             this.$message.error(response.data.message || '操作失败');
            //         }
            //     } catch (error) {
            //         this.$message.error('请求失败: ' + error.message);
            //     }
            // },
            async handleFollow(user) {
                    const response = await axios.post('/MVCDemo/follow/turnFollow',
                        `followedId=${user.id}`,
                        { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
                    );
                        //正确切换状态：当前状态取反
                        const newStatus = !user.liked;
                        this.$set(user, 'liked', newStatus);
                        // 根据新状态显示消息
                        this.$message(response.data.message);
            },


            // 搜索处理
            handleSearchUser() {
                this.currentPageUser = 1;
                this.loadUsers();
            },

            // 分页处理
            handleSizeChangeUser(val) {
                this.pageSizeUser = val;
                this.loadUsers();
            },
            handleCurrentChangeUser(val) {
                this.currentPageUser = val;
                this.loadUsers();
            },

            // 用户类型显示
            getUserTypeText(type) {
                switch(type) {
                    case 1: return '普通用户';
                    case 2: return '音乐人';
                    case 3: return '管理员';
                    default: return '未知类型';
                }
            },
            getUserTypeStyle(type) {
                switch(type) {
                    case 1: return 'info';
                    case 2: return 'success';
                    case 3: return 'danger';
                    default: return '';
                }
            },
            // 歌曲搜索处理
            handleSearchSong() {
                this.currentPageSong = 1;
                this.loadSongs();
            },

            // 加载歌曲数据
            loadSongs() {//alert(this.sortType);
                axios.get('/MVCDemo/space/searchSong', {
                    params: {
                        keyword: this.searchKeywordSong,
                        type: this.sortType,
                        currentPage: this.currentPageSong,
                        pageSize: this.pageSizeSong
                    }
                }).then(resp => {//alert(this.sortType)
                    this.tableDataSong = resp.data.rows;
                    this.totalCountSong = resp.data.totalCount;
                });
            },
            handleLike(song) {
                axios({
                    method: "post",
                    url: "/MVCDemo/song/songLike?songId="+song.id,
                }).then(resp=>{
                    this.$message(resp.data.message);
                    // alert(resp.data.message);
                    //this.selectAllSong();
                    this.loadSongs();
                })
            },
            handlePlayCount(song) {
                axios({
                    method: "post",
                    url: "/MVCDemo/song/addPlayCount?songId="+song.id,
                }).then(resp=>{
                    // alert(resp.data.message);
                    //this.selectAll();
                    this.loadSongs();
                })
            },
            // 歌曲分页处理
            handleSizeChangeSong(val) {
                this.pageSizeSong = val;
                this.loadSongs();
            },
            handleCurrentChangeSong(val) {
                this.currentPageSong = val;
                this.loadSongs();
            },

            // 专辑搜索处理
            handleSearchColumn() {
                this.currentPageColumn = 1;
                this.loadColumns();
            },

            // 加载专辑数据
            loadColumns() {//alert(this.searchKeywordColumn),
                axios.get('/MVCDemo/space/searchColumn', {
                    params: {
                        keyword: this.searchKeywordColumn,
                        currentPage: this.currentPageColumn,
                        pageSize: this.pageSizeColumn
                    }
                }).then(resp => {//alert(resp.data.totalCount)
                    this.tableDataColumn = resp.data.rows;
                    this.totalCountColumn = resp.data.totalCount;
                });
            },

            // 专辑分页处理
            handleSizeChangeColumn(val) {
                this.pageSizeColumn = val;
                this.loadColumns();
            },
            handleCurrentChangeColumn(val) {
                this.currentPageColumn = val;
                this.loadColumns();
            },
            // 查看专辑详情
            handleViewColumn(column) {
                this.dialogVisibleColumnSongs = true;
                this.selectedColumnId = column.id;
                this.currentColumnSongsPage = 1;
                this.loadColumnSongs();
            },

            // 加载专辑歌曲
            loadColumnSongs() {
                axios.get('/MVCDemo/column/getSongListByPageAndColumnId', {
                    params: {
                        columnId: this.selectedColumnId,
                        currentPage: this.currentColumnSongsPage,
                        pageSize: this.pageColumnSongsSize
                    }
                }).then(resp => {
                    this.columnSongsData = resp.data.rows;
                    this.totalColumnSongsCount = resp.data.totalCount;
                });
            },

            // 分页处理
            handleColumnSongsSizeChange(val) {
                this.pageColumnSongsSize = val;
                this.currentColumnSongsPage = 1;
                this.loadColumnSongs();
            },
            handleColumnSongsCurrentChange(val) {
                this.currentColumnSongsPage = val;
                this.loadColumnSongs();
            },


            // 歌单搜索处理
            handleSearchPlayList() {
                this.currentPagePlayList = 1;
                this.loadPlayLists();
            },

            // 加载歌单数据
            loadPlayLists() {//this.$message(this.searchKeywordPlayList)
                axios.get('/MVCDemo/space/searchPlayList', {
                    params: {
                        keyword: this.searchKeywordPlayList,
                        currentPage: this.currentPagePlayList,
                        pageSize: this.pageSizePlayList
                    }
                }).then(resp => {
                    if (resp.data ) {
                        //this.$message(`总记录数: ${resp.data.totalCount}`);
                        this.tableDataPlayList = resp.data.rows;
                        this.totalCountPlayList = resp.data.totalCount;
                    } else {
                        this.$message.error('返回数据格式异常');
                        console.error('Invalid response:', resp);
                    }
                });
            },

            // 歌单分页处理
            handleSizeChangePlayList(val) {
                this.pageSizePlayList = val;
                this.loadPlayLists();
            },
            handleCurrentChangePlayList(val) {
                this.currentPagePlayList = val;
                this.loadPlayLists();
            },
            // 查看歌单详情
            handleViewPlayList(playlist) {
                this.dialogPlaylistSongs = true;
                this.selectedPlaylistId = playlist.id;
                this.playlistSongPage = 1;
                this.loadPlaylistSongs();
            },

            // 加载歌单歌曲
            loadPlaylistSongs() {
                axios.get('/MVCDemo/playList/listSongIdListByPlayListId', {
                    params: {
                        playListId: this.selectedPlaylistId,
                        currentPage: this.playlistSongPage,
                        pageSize: this.playlistSongSize
                    }
                }).then(resp => {
                    this.playlistSongData = resp.data.rows;
                    this.playlistSongTotal = resp.data.totalCount;
                });
            },

            // 分页处理
            handlePlaylistSongSizeChange(val) {
                this.playlistSongSize = val;
                this.playlistSongPage = 1;
                this.loadPlaylistSongs();
            },

            handlePlaylistSongPageChange(val) {
                this.playlistSongPage = val;
                this.loadPlaylistSongs();
            },

            // 下载处理方法
            async handleDownload(song) {
                // 实时获取最新用户状态
                await this.fetchUserData()

                if (!this.isVip) {
                    this.$message.error({
                        message: 'VIP会员专享下载功能',
                        duration: 2000,
                        showClose: true
                    })
                    return
                }

                this.selectedSongPath = song.songPath
                this.downloadDialogVisible = true
            },
            // 复制下载链接
            copyDownloadLink() {
                const input = document.createElement('input')
                input.value = this.selectedSongPath
                document.body.appendChild(input)
                input.select()
                document.execCommand('copy')
                document.body.removeChild(input)

                this.$message.success({
                    message: '链接已复制到剪贴板',
                    duration: 1500
                })
            },
            // 获取用户数据（补充VIP信息）
            async fetchUserData() {
                try {
                    const res = await axios.get('/MVCDemo/user/getUser')
                    this.user = res.data
                } catch (e) {
                    console.error('用户数据获取失败:', e)
                }
            },
            // 初始化加载随机内容

            // 加载随机歌曲
            async loadRandomSong() {
                this.randomSongLoading = true;
                try {
                    const res = await axios.get('/MVCDemo/space/randomSong');
                    if (res.data.code === 200) {
                        this.randomSong = res.data.data;
                    }
                } catch (e) {
                    this.$message.error('获取随机歌曲失败');
                } finally {
                    this.randomSongLoading = false;
                }
            },

            // 加载随机歌单
            async loadRandomPlaylist() {
                this.randomPlaylistLoading = true;
                try {
                    const res = await axios.get('/MVCDemo/space/randomPlaylist');
                    if (res.data.code === 200) {
                        this.randomPlaylist = res.data.data;
                    }
                } catch (e) {
                    this.$message.error('获取随机歌单失败');
                } finally {
                    this.randomPlaylistLoading = false;
                }
            }
        },
        computed: {
            // VIP状态计算
            isVip() {
                if (!this.user.vipEndAt) return false
                const vipTime = new Date(this.user.vipEndAt).getTime()
                return vipTime > Date.now()
            },
            // VIP到期时间格式化
            formatVipDate() {
                return this.user.vipEndAt ?
                    new Date(this.user.vipEndAt).toLocaleDateString() :
                    '未开通'
            },
            // 验证用户类型有效性
            isValidUserType() {
                return [1, 2, 3].includes(this.user.userType)
            } ,
            isMusicUser() {
               // alert(this.user.userType )
                //alert(this.user.userType === 2)
                return this.user.userType === 2;
            },
            isManager() {
                return this.user.userType === 3;
            }
        },
        data() {
            return {//用户搜索相关
                searchKeywordUser: '',
                tableDataUser: [],
                currentPageUser: 1,
                pageSizeUser: 5,
                totalCountUser: 0,
                loadingMap: new Map(),// 用于存储加载状态
                // 歌曲搜索相关
                searchKeywordSong: '',
                tableDataSong: [],
                currentPageSong: 1,
                pageSizeSong: 5,
                totalCountSong: 0,
                sortType: 0, // 0-点赞排序 1-时间排序

                // 专辑搜索相关
                searchKeywordColumn: '',
                tableDataColumn: [],
                currentPageColumn: 1,
                pageSizeColumn: 5,
                totalCountColumn: 0,

                // 专辑歌曲相关
                dialogVisibleColumnSongs: false,
                columnSongsData: [],
                currentColumnSongsPage: 1,
                pageColumnSongsSize: 5,
                totalColumnSongsCount: 0,
                selectedColumnId: null,

                // 歌单搜索相关
                searchKeywordPlayList: '',
                tableDataPlayList: [],
                currentPagePlayList: 1,
                pageSizePlayList: 5,
                totalCountPlayList: 0,

                // 歌单歌曲相关
                dialogPlaylistSongs: false,
                playlistSongData: [],
                playlistSongPage: 1,
                playlistSongSize: 5,
                playlistSongTotal: 0,
                selectedPlaylistId: null,
                // vip
                downloadDialogVisible: false,
                selectedSongPath: '',
                // 确保用户数据包含VIP信息
                user: {
                    userType: 0, // 初始化
                    vipEndAt: null,
                },
                //随机歌曲/歌单
                randomSong: null,
                randomPlaylist: null,
                randomSongLoading: false,
                randomPlaylistLoading: false,
            }
        }
    })


</script>